<template>
  <view class="teacher-detail-page">
    <view class="teacher">

      <!-- 讲师信息区 -->
      <view class="teacher-info">
        <view class="avatar-wrapper">
          <image :src="teacher.avatar" mode="aspectFill" class="teacher-avatar"/>
        </view>
        <view class="teacher-basic">
          <view class="teacher-name">{{ teacher.name }}</view>
          <view class="teacher-title">{{ teacher.title }}</view>
          <view class="teacher-intro">{{ teacher.intro }}</view>
        </view>
      </view>

      <!-- 主讲科目 -->
      <view class="teacher-subject">
        <view class="subject-label">主讲</view>
        <view class="subject-content">{{ teacher.subject }}</view>
      </view>
    </view>

    <!-- 选项卡导航 -->
    <view class="tab-bar">
      <view
          class="tab-item"
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ active: currentTab === index }"
          @click="changeTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 课程预览区 -->
    <view v-if="currentTab === 0">
      <card :list="course"></card>
    </view>
    <!-- 相关课程 -->
    <view v-if="currentTab === 1">
      <card :list="course2"></card>
    </view>
    <!-- 讲师介绍 -->
    <view v-if="currentTab === 2">
      <view v-html="teacher.intro"></view>
    </view>
  </view>
</template>

<script>
import card from "./components/card.vue";
import {getTeacherCourseList, getTeacherCourseRelated} from "../../../api/new";

export default {
  components: {card},
  data() {
    return {
      teacher: {},
      tabs: ['试听课程', '相关课程', '讲师介绍'],
      currentTab: 0,
      course: [],
      course2: [],
      info:'ajsdhjshfhsdfhdghdsfhgbsgfhdsfd',
      item:{},
      propagation:{
        limit:10,
        page:1,
        id:''
      },
      propagation2:{
        limit:10,
        page:1,
        id:''
      },
    };
  },
  onLoad(options) {
    this.teacher = JSON.parse(options.item)
    this.propagation.id = this.teacher.id
    this.propagation2.id = this.teacher.id
    this.getDetail()
    getTeacherCourseRelated(this.propagation2).then(res=>{
      this.$set(this,'course2',res.data.list)
      this.propagation2.page=res.data.page+1
    })
  },
  mounted() {
  },
  onReachBottom(){
    this.getDetail()
  },
  methods: {
    getDetail(){
      if(this.currentTab===0){
        getTeacherCourseList(this.propagation).then(res=>{
          if (this.propagation.page === 1) {
            this.course = res.data.list; // 第一页直接替换
          } else {
            this.course = [...this.course, ...res.data.list]; // 后续页追加数据
          }
          this.propagation.page=res.data.page+1
        })
      }else{
        getTeacherCourseRelated(this.propagation2).then(res=>{
          if (this.propagation2.page === 1) {
            this.course2 = res.data.list; // 第一页直接替换
          } else {
            this.course2 = [...this.course2, ...res.data.list]; // 后续页追加数据
          }
          this.propagation2.page=res.data.page+1
        })
      }
    },
    changeTab(index) {
      this.currentTab = index;
      // if(index!==2){
      //   this.getDetail()
      // }
    },
  }
};
</script>

<style lang="scss" scoped>
// 定义变量
$primary-color: #a56c3c;
$text-dark: #333;
$text-medium: #666;
$text-light: #999;
$border-color: rgba(179, 169, 169, 0.1);
$bg-light: #f5f5f5;
$bg-highlight: #d3b6a0;
$highlight-text: #8B4513;

// 定义混合器
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.teacher-detail-page {
  padding: 15px;

  .teacher {
    padding: 20px;
    background-color: #fff;
    // 讲师信息区
    .teacher-info {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
      border-bottom: 1px solid $border-color;
      padding-bottom: 20px;

      .avatar-wrapper {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 15px;
        border: 2px solid #8a5734;
        margin-top: 10px;

        .teacher-avatar {
          width: 100%;
          height: 100%;
        }
      }
    }

    .teacher-basic {
      flex: 1;

      .teacher-name {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .teacher-title {
        background-color: $bg-highlight;
        color: $highlight-text;
        padding: 4px 11px;
        border-radius: 15px;
        display: inline-block;
        margin-bottom: 5px;
      }

      .teacher-intro {
        font-size: 14px;
        color: $text-medium;
      }
    }
  }

  // 主讲科目
  .teacher-subject {
    display: flex;
    align-items: center;

    .subject-label {
      color: $primary-color;
      font-size: 16px;
      margin-right: 10px;
      width: 132rpx;
      text-align: center;
    }

    .subject-content {
      font-size: 14px;
      color: $text-dark;
      display: -webkit-box;      /* 必须 */
      -webkit-box-orient: vertical; /* 垂直排列子元素 */
      -webkit-line-clamp: 2;     /* 显示的行数 */
      overflow: hidden;          /* 超出部分隐藏 */
      width: 100%;          /* 宽度限制 */
      line-height: 1.5;          /* 行高，用于计算总高度 */
      max-height: 3em;           /* 最大高度 = 行数 × 行高 */
    }
  }

  // 选项卡导航
  .tab-bar {
    display: flex;
    margin-bottom: 15px;
    margin-top: 15px;
    border-bottom: 1px solid $border-color;

    .tab-item {
      flex: 1;
      text-align: center;
      padding: 13px 0;
      border-bottom: 2px solid transparent;
      color: $text-medium;
      font-size: 14px;
      cursor: pointer;

      &.active {
        border-bottom-color: $primary-color;
        color: $text-dark;
      }
    }
  }
}
</style>